<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增会议申请')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: select2-js" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal" id="form-application-add">
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label">编号</label>-->
<!--                <div class="col-sm-8">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label">会议名称</label>
                <div class="col-sm-8">
                    <input name="meetingName" class="form-control" type="text" placeholder="请输入会议名称" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">创建人</label>
                <div class="col-sm-8">
                    <input name="createPerson" class="form-control" type="text" th:value="${@permission.getPrincipalProperty('userName')}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">创建时间</label>
                <div class="col-sm-8">
                    <input name="createTime" class="form-control" type="text" th:value="${#dates.format(new java.util.Date(),'yyyy-MM-dd HH:mm:ss')}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">紧急程度:</label>
                <div class="col-sm-8">
                    <select name="level" class="form-control">
                        <option value="">请选择等级(一级最高)</option>
                        <option value="0">普通</option>
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">部门:</label>
                <div class="col-sm-9">
                    <select class="form-control" id="deptIdList" name="deptId">
                        <option value="">请选择部门</option>
<!--                        <option th:each="post:${deptList}" th:value="${post.deptId}" th:text="${post.deptName}" th:disabled="${post.status == '1'}" ></option>-->
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">地点</label>
                <div class="col-sm-9">
                    <select class="form-control" name="addressId" >
                        <option th:each="add:${addList}" th:value ="${add.id}" th:text="${add.meetingAddressName}"></option>
                        <option>其他</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主持人</label>
                <div class="col-sm-9">
                    <select class="form-control" name="hostId">
                        <option th:each="user:${userList}" th:value="${user.userId}" th:text="${user.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">联系人</label>
                <div class="col-sm-9">
                    <select class="form-control" id="linkman" name="linkmanId">
                        <option value="">请选择</option>

                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">联系方式</label>
                <div class="col-sm-9">
                    <input id="phoneNumber" type="text" name="phonenumber" class="form-control" readonly>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label" >与会人员</label>
                <div class="col-sm-9">
                    <select class="form-control" id="meetingPerson" multiple name="meetingPerson">
                        <option th:each="user:${userList}" th:value="${user.userId}" th:text="${user.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" >分享人</label>
                <div class="col-sm-9">
                    <select class="form-control " id="sharePerson"  multiple name="SharedPerson">
                        <option th:each="user:${userList}" th:value="${user.userId}" th:text="${user.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">类型</label>
                <div class="col-sm-9">
                    <select class="form-control" name="type">
                        <option value="">请选择类型</option>
                        <option value="0">周会</option>
                        <option value="1">培训</option>
                        <option value="2">策划</option>
                        <option value="3">其他</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态</label>
                <div class="col-sm-8">
                    <select name="status" class="form-control" disabled>
                        <option value="0">未开始</option>
                        <option value="1">已开始</option>
                        <option value="2">已结束</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">开始时间:</label>
                <div class="col-sm-8">
                    <input id="startTime" name="startTime" class="form-control" type="text" placeholder="请输入开始时间">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">结束时间</label>
                <div class="col-sm-8">
                    <input id="endTime" name="endTime" class="form-control" type="text" placeholder="请输入结束时间">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">附件:</label>
                <div class="col-sm-8">
                    <textarea name="file" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">内容:</label>
                <div class="col-sm-8">
                    <textarea name="text" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注:</label>
                <div class="col-sm-8">
                    <textarea name="context" class="form-control"></textarea>
                </div>
            </div>
        </form>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>


    <script th:inline="javascript">
        var prefix = ctx + "list/application"

        $.validator.addMethod("dateComparison", function(value, element, params) {
            var startDate = new Date($(params[0]).val());
            var endDate = new Date(value);
            console.log(startDate)
            if (startDate < endDate) {
                return true;
            }
            return false;
        }, "会议结束日期必须大于或等于会议开始日期");

        $.validator.addMethod("meetBTime", function(value, element, params) {
            var startDate = new Date($(params[0]).val());
            console.log(startDate)
            var endDate = new Date();
            if (startDate >= endDate) {
                return true;
            }
            return false;
        }, "会议开始日期必须大于等于当前日期");

        $("#form-application-add").validate({
            focusCleanup: true,
            rules: {
                startTime: {
                    required: true,
                    date: true,
                    meetBTime: ["#startTime"]
                },
                endTime: {
                    required: true,
                    date: true,
                    dateComparison: ["#startTime"]
                }
            },
            messages: {
                startTime: {
                    required: "请输入开始日期",
                    date: "请输入有效的日期"
                },
                endTime: {
                    required: "请输入结束日期",
                    date: "请输入有效的日期"
                }
            }
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/apply", $('#form-application-add').serialize());
            }
        }

        $("input[name='startTime']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            minView: "month",
            autoclose: true
        });

        $("input[name='endTime']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            minView: "month",
            autoclose: true
        });

        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
    </script>
    <script th:inline="javascript">
        $(document).ready(function(){
            $.ajax({
                url: prefix + '/selectUserList',
                type: 'GET',
                dataType: 'json',
                success:function (response){
                    //获取用户列表填充到下拉框中
                    var userList = response.rows;
                    var selectElement = $('#linkman');
                    $.each(userList,function(index,user){
                        selectElement.append($('<option>',{
                            value: user.userId,
                            text: user.userName
                        }));
                    });
                },
                error: function(xhr,status,error){
                    console.error('错误',error)
                }
            })
        }),
        //     用来监听 下拉框中选中的值
        $('#linkman').change(function(){
            var selectUserId = $(this).val();
            $.ajax({
                url: prefix + '/getUserPhoneNumber',
                type: 'GET',
                dataType: 'json',
                data:{
                    userId:selectUserId
                },
                success:function (response){
                    if (response.code === 0){
                        var phoneNumber = response.data.phonenumber;
                        $('#phoneNumber').val(phoneNumber);
                    }else{
                        console.error('获取用户信息失败')
                    }
                },
                error: function(xhr,status,error){
                    console.error('错误',error)
                }
            });
        }),
        // 获取部门列表
        $(document).ready(function(){
            $.ajax({
                url: prefix + '/getDeptList',
                type: 'GET',
                dataType: 'json',
                success:function (response){
                    //获取用户列表填充到下拉框中
                    var userList = response.rows;
                    var selectElement = $('#deptIdList');
                    $.each(userList,function(index,user){
                        selectElement.append($('<option>',{
                            value: user.deptId,
                            text: user.deptName
                        }));
                    });
                },
                error: function(xhr,status,error){
                    console.error('错误',error)
                }
            })
        }),
        //随着下拉框选择中的部门 进行查询 显示该部门的所有用户在这个下拉框中
        $('#deptIdList').change(function(){
            //部门下来框中选中的值给到selectUserId
            var selectdeptId = $(this).val();
            $.ajax({
                url: prefix + '/getDeptUserList',
                type: 'GET',
                dataType: 'json',
                data:{
                    deptId:selectdeptId
                },
                success:function (response){
                    if (response.code === 200){
                        var userList = response.rows;
                        var selectElement = $('#meetingPerson');
                        $.each(userList,function(index,user){
                            selectElement.append($('<option>',{
                                value: user.userId,
                                text: user.userName
                            }));
                        });
                    }else{
                        console.error('获取用户信息失败')
                    }
                },
                error: function(xhr,status,error){
                    console.error('错误',error)
                }
            });
        });
    </script>
</body>
</html>